import React from 'react'
import MyCount from '../MyCount'
import './index.scss'
export default function GoodsItem ({
  id,
  goods_name,
  goods_img,
  goods_price,
  goods_count,
  goods_state,
  changeStatus,
}) {

  return (
    <div className="my-goods-item">
      <div className="left">
        <div className="custom-control custom-checkbox">
          {/* //!#2. 子组件调用传递过来的方法并传递实参 */}
          <input type="checkbox" className="custom-control-input" id={`input${id}`}
            checked={goods_state}
            onChange={() => changeStatus(id)}
          />
          <label className="custom-control-label" htmlFor={`input${id}`}>
            <img
              src={goods_img}
              alt=""
            />
          </label>
        </div>
      </div>
      <div className="right">
        <div className="top">{goods_name}</div>
        <div className="bottom">
          <span className='price'>¥ {goods_price}</span>
          {/* <span>counter组件{goods_count}</span> */}
          <MyCount count={goods_count}  id={id} />
        </div>
      </div>
    </div>
  )
}
